<!DOCTYPE html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>请求授权</title>

    <!-- 导入样式 element-plus -->
    <!--<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />-->
    <!-- 导入样式 element-plus，使用固定版本 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus@2.1.8/dist/index.css">

    <!-- 导入 Vue 3 -->
    <!--<script src="https://unpkg.com/vue@next"></script>-->
    <!-- 导入 Vue 3，使用固定版本，开发版本 -->
    <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>
    <!-- 导入 Vue 3，使用固定版本，生产版本 -->
    <!--<script src="https://unpkg.com/vue@3.2.31/dist/vue.global.prod.js"></script>-->

    <!-- 导入组件库 element-plus -->
    <!--<script src="https://unpkg.com/element-plus"></script>-->
    <!-- 导入组件库 element-plus，使用固定版本，开发版本 -->
    <script src="https://unpkg.com/element-plus@2.1.8/dist/index.full.js"></script>
    <!-- 导入组件库 element-plus，使用固定版本，生产版本 -->
    <!--<script src="https://unpkg.com/element-plus@2.1.8/dist/index.full.min.js"></script>-->

</head>
<body>

<div id="app">

    <el-container>

        <el-card class="box-card" style="margin-left: auto; margin-right: auto;">
            <template #header>
                <div class="card-header">
                    <h3>您是否授权“[[${clientId}]]”访问受保护的资源？</h3>
                </div>
            </template>

            <form id="form-authorize" action="" method="post">

                <input type="hidden" name="_csrf" th:value="${_csrf}">
                <input type="hidden" name="user_oauth_approval" value="true">

                <div v-for="(scope,i) in scopes" :key="scope">

                    <div>
                        scope.{{ scope }} &nbsp;&nbsp;
                        <el-radio v-model="scopeOptions[i]" :name="'scope.'+scope" :label="true"
                                  :id="'scope-' + scope + '-true'">同意
                        </el-radio>
                        <el-radio v-model="scopeOptions[i]" :name="'scope.'+scope" :label="false"
                                  :id="'scope-' + scope + '-false'">拒绝
                        </el-radio>
                    </div>

                </div>

                <el-button name="authorize" native-type="submit" id="submit">授权</el-button>

            </form>

        </el-card>

    </el-container>

</div>
</body>

<script th:inline="javascript" type="text/javascript">

    const app = Vue.createApp({
        /* 选项 */
        data() {
            return {
                count: 4,
                scopes: [[${scopes}]],
                scopeOptions: [[${scopeOptions}]]
            }
        }
    })

    app.use(ElementPlus)

    const vm = app.mount('#app')
    console.log(vm.count) // => 4

    // 当且仅当只有范围 snsapi_base 时，自动授权
    window.onload = function () {
        if ([[${silentAuth}]] === true) {
            document.getElementById("scope-snsapi_base-true").checked = true
            document.getElementById("submit").click()
        }
    }
</script>

</html>